<template>
  <div class="query-view" @click="state.isList = false">
    <header class="query-search">
      <van-icon name="arrow-left" @click="back" />
      <van-search background="#f6f6f6" style="width: 100%" placeholder="请输入搜索关键词" v-model.trim="state.value"
        show-action>
        <template #action>
          <div @click.stop="onSearch">搜索</div>
        </template>
      </van-search>
    </header>
    <div style="margin-bottom: 10px;">
      <van-radio-group v-model="checked" direction="horizontal">
        <van-radio name="1">法律法规</van-radio>
        <van-radio name="2">裁量基准</van-radio>
        <van-radio name="3">违法行为</van-radio>
      </van-radio-group>
    </div>
    <template v-if="state.isList">
      <div class="records-list" v-for="item in state.queryList" :key="item.id">
        <div class="records-list-item" @click="deailsPage(item)">
          <span v-if="checked == '1'">国家<br />法规</span>
          <span v-if="checked == '2'">裁量<br />基准</span>
          <span v-if="checked == '3'">违法<br />行为</span>
          <p>{{ item.infoName }}</p>
        </div>
        <!-- <div class="records-list-item" @click="deailsPage">
          <span class="span-color">地方<br />法规</span>
          <p>{{ item.name }}</p>
        </div> -->
      </div>
    </template>

    <div class="past-records" v-if="!state.isList">
      <div class="records-title"><span>猜你想搜</span></div>
      <span class="records-item" @click="guessChange(item)" v-for="(item, index) in state.guessList" :key="index">{{
    item
  }}</span>

    </div>
    <div class="past-records" v-if="!state.isList">
      <div class="records-title"><span>搜索历史</span><van-icon name="delete-o" @click="clearList" /></div>
      <span class="records-item" @click="guessChange(item)" v-for="(item, index) in  state.queryHistoryList"
        :key="index">{{
    item }}</span>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { lawQueryLaw, lawQueryStd, lawActQuery } from "@/api";
import { showNotify } from 'vant'

const router = useRouter()
const state = reactive({
  value: '',
  isList: false,
  queryHistoryList: [],
  queryList: [],
  guessList: ['互联网广告管理法', '市场管理法', '彩妆售假法', '市场营销管理法']
})
const guessChange = (val) => {
  state.value = val
  setTimeout(() => {
    onSearch()
  })
}
const checked = ref("1")
const queryLawQueryLaw = () => {
  lawQueryLaw({
    query: state.value,
    scope: ""
  }).then((res) => {
    // console.log(res.data.nodes.filter((item) => item.type === "法律法规条款项"))
    const arr = []
    const queryList = res.data.nodes.filter((item) =>{
      if (item.type === "法律法规条款项" && !arr.includes(item['法律编号'])) {
        arr.push(item['法律编号'])
        return true
      }
      return false
    })
    queryList.forEach(item => {
      item.infoName = item['条款项父级']//法律名称
    })
    state.queryList = queryList
  })
}
const queryLawQueryStd = () => {
  lawQueryStd({
    query: state.value,
    scope: ""
  }).then((res) => {
    // console.log(res.data.nodes.filter((item) => item.type === "裁量基准"))
    const arr = []
    const queryList = res.data.nodes.filter((item) => {
      if (item.type === "裁量基准" && !arr.includes(item.key)) {
        arr.push(item.key)
        return true
      }
      return false
    })
    queryList.forEach(item => {
      item.infoName = item['基准类别']
    })
    state.queryList = queryList
  })
}
const queryLawActQuery = () => {
  lawActQuery({
    query: state.value,
    scope: ""
  }).then((res) => {
    state.queryList = res.data.nodes.filter((item) => item.type === "案件系统违法行为")
    // console.log(state.queryList)
    state.queryList.forEach(item => {
      item.infoName = item['执法权名称']
    })
  })
}
const clearList = () => {
  state.queryHistoryList = []
  localStorage.removeItem('queryHistoryList')
}
const onSearch = (val) => {
  if (state.value == "") {
    showNotify({ type: 'warning', message: '请输入内容' })
    return
  }
  state.isList = true
  console.log(11222, checked.value)
  if (checked.value === "1") {
    queryLawQueryLaw()
  } else if (checked.value === "2") {
    queryLawQueryStd()
  } else {
    queryLawActQuery()
  }
  if (!state.queryHistoryList.includes(state.value)) {
    state.queryHistoryList.push(state.value)
    localStorage.setItem('queryHistoryList', JSON.stringify(state.queryHistoryList))
  }
}
const back = () => {
  router.go(-1)
}
const deailsPage = (val) => {
  router.push({ path: '/details', query: { type: checked.value, key: checked.value === "1" ? val['法律编号'] : val.key, data: JSON.stringify(val) } })
}
onMounted(() => {
  state.queryHistoryList = JSON.parse(localStorage.getItem('queryHistoryList')) || []
})
</script>
<style lang="scss" scoped>
.query-view {
  height: 100vh;
  padding: 0 20px;
  background: #f6f6f6;

  .query-search {
    display: flex;
    align-items: center;
    padding-top: 20px;
    --van-search-input-height: 36px;
  }

  .past-records {
    .records-title {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      font-size: 18px;
      font-weight: 600;
    }

    .records-item {
      display: inline-block;
      padding: 4px 10px;
      margin: 0 10px 10px 0;
      border-radius: 4px;
      background: #fff;
    }
  }

  .records-list {
    .records-list-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      span {
        display: inline-block;
        padding: 4px 10px;
        background: #d2f7d2;
        font-size: 18px;
        border-radius: 8px;
        color: #069106;
        letter-spacing: 4px;
      }

      .span-color {
        color: #097fd2;
        background: #d2ebfd;
      }

      p {
        margin: 0;
        display: inline-block;
        width: 70%;
        margin-left: 20px;
      }
    }
  }
}
</style>>
